<div class="profile" ng-controller="ProfileEditCtrl" ng-init="initProfile()"  style="margin-top: -10px;">

  <div ng-include="'angular/template/include/toptip.html'">
  </div>

  <div class="profile-logo"><img src="angular/images/logo.png" alt="logo" style="width: 80px;"/></div>
  <p class="text-center no-bottom-margin">
    <label class="gray-dark font-sm">圈圈账号：{{customer.code}}</label>
  </p>
  <p class="text-center no-margin top-margin-5">{{customer.phone}}</p>

  <ul class="list profile-detail-list bg-gray top-margin-20">
    <li class="item chevron-right clearfix" ng-click="openNicknameModal()">
      <label>昵称</label>
      <p class="pull-right">{{customer.profile.nickName || '添加'}}</p>
    </li>
  </ul>

  <ul class="list profile-detail-list bg-gray top-margin-20">
    <li class="item chevron-right clearfix" ng-click="openAgeModal()">
      <label>年龄</label>
      <p class="pull-right">{{customer.profile.age || '添加'}}</p>
    </li>
    <li class="item chevron-right clearfix"  ng-click="showGender()">
      <label>性别</label>
      <p class="pull-right">{{customer.profile.sex || '添加'}}</p>
    </li>
    <li class="item chevron-right clearfix" ng-click="showAreaPopup()">
      <label>地区</label>
      <p class="pull-right">{{customer.profile.city.name || '添加'}}</p>
    </li>
  </ul>

  <ul class="list profile-detail-list bg-gray top-margin-20">
    <li class="item chevron-right">
      <label>隐私设置</label>
      <p class="pull-right" ng-click="resetPassword()">修改密码</p>
    </li>
  </ul>
  
  <div class="sure" ng-click="saveAndBack()">确定 </div>

</div>

<script type="text/ng-template" id="areaPopup.html">
  <div class="area-selector" ng-controller="ProfileEditCtrl" ng-init="initArea()">
    <div class="province-warp">
      <div style='font-size:16px;font-height:bold;height:25px;line-height:25px;overflow:hidden;text-align:center'>请选择省份：</div>
      <div class="scroll-warp">
        <ul class="province">
          <li class="item" ng-repeat="province in provinces" ng-class="province.selected ? 'selected' : '' " ng-click="province.selected || loadCity($index)">{{province.name}}</li>
        </ul>
      </div>
    </div>
    
    <div class="city-warp">
      <div style='font-size:16px;font-height:bold;height:25px;line-height:25px;overflow:hidden;text-align:center'>请选择城市：</div>
      <div class="scroll-warp">
        <ul class="city">
          <li class="item" ng-repeat="city in cities" ng-class="city.selected ? 'selected' : '' " ng-click="province.selected || selectCity($index)" >{{city.name}}</li>
        </ul>
      </div>
    </div>
  </div>
</script>

<script id="nickname-modal.html" type="text/ng-template">
  <div class="modal" style="background: #EFEFF4;">
    <header class="bar bar-header bar-positive client-bar">
      
      <h1 class="title">修改昵称</h1>
    </header>
    <content has-header="true" padding="true">
      <div class="" style="margin-top: 60px;">
        <input class="input input-block" name="name" type="text" ng-model="customer.profile.nickName" placeholder="请输入昵称" required/>
      </div>
      <div class="clearfix top-margin-10 text-center">
        <button class="button button-blue" ng-click="confirmNicknameModal()">保存</button>
        <button class="button" ng-click="closeNicknameModal()" style="padding-right: 20px;">取消</button>
      </div>
    </content>
  </div>
</script>

<script id="age-modal.html" type="text/ng-template">
  <div class="modal" style="background: #EFEFF4;">
    <header class="bar bar-header bar-positive client-bar">
      <h1 class="title">修改年龄</h1>
    </header>
    <content has-header="true" padding="true">
      <div class="" style="margin-top: 60px;">
        <input class="input input-block" name="age" type="text" ng-model="customer.profile.age" placeholder="请输入年龄" required/>
      </div>
      <div class="clearfix top-margin-10 text-center">
        <button class="button button-blue" ng-click="confirmAgeModal()">保存</button>
        <button class="button" ng-click="closeAgeModal()" style="padding-right: 20px;">取消</button>
      </div>
    </content>
  </div>
</script>
